<!--
 * @Description: 邀请二维码
 * @Author: liu (1427179517@qq.com)
 * @Date: 2023-05-04 16:46:58
 * @LastEditors: liu (1427179517@qq.com)
 * @LastEditTime: 2023-05-08 15:42:50
 * @FilePath: \jiekuan-app\src\subPages\other\invitationQrCode.vue
-->
<template>
  <div class="page">
    <div class="page-header">
      <u-navbar
        title="邀请二维码"
        :background="nav_background"
        title-color="#fff"
        back-icon-color="#fff"
        :height="60"
        :border-bottom="false"
      >
      </u-navbar>
    </div>
    <div class="page-content u-p-20">
      <div class="promotion">
        <div class="u-flex all-center">
          <image src="../../static/images/invite_logo.png" alt="" class="invite_logo u-m-r-24" />
          <div>
            <div>小缘</div>
            <div class="text u-m-t-30">高端线下交友平台</div>
          </div>
        </div>
        <div class="u-m-t-52 promotion_code_box">
          <div>我的推广码</div>
          <div class="u-m-t-42 text">1213141516</div>
          <image
            :src="info_data.inviteCode"
            class="u-m-t-52 promotion_code"
            alt=""
            @longpress="saveImg(info_data.inviteCode)"
          />
          <div class="copy u-m-t-28" @click="handleClick({ type: 'copy' })">复制链接</div>
          <button class="save u-m-t-40" @click.stop="saveImg(info_data.inviteCode)">下载或长按保存</button>
        </div>
      </div>
    </div>
    <div class="page-footer"></div>
  </div>
</template>

<script>
export default {
  name: 'InvitationQrCode', // 页面名称
  components: {}, // 挂载组件
  props: {}, // 组件传值
  data() {
    return {
      nav_background: { backgroundImage: 'linear-gradient(45deg, #5735B1, #3D4AD7)' },
      platform: 1, // 用户机型 1：ios 2：安卓
      info_data: {}, // 信息数据
    }
  },
  computed: {}, // 计算机属性 类似与data概念
  watch: {}, // 监控data中数据变化
  created() {}, // 生命周期-创建完成(可以访问当前this实例)
  mounted() {}, // 生命周期-挂载完成(可以访问DOM元素)
  methods: {
    // 获取用户机型
    getSystemInfo() {
      const that = this
      uni.getSystemInfo({
        success: (res) => {
          if (res.platform === 'ios') {
            that.platform = 1
          } else {
            that.platform = 2
          }
        },
      })
    },
    handleClick(options) {
      const { type } = options
      switch (type) {
        case 'copy': // 复制链接
          if (this.platform === 1) {
            this.$copyText(this.info_data.iosUrl)
          } else {
            this.$copyText(this.info_data.androidUrl)
          }
          break
        default:
          break
      }
    },
    // 获取用户邀请信息
    apiGetFetchMemberInviteInfo() {
      this.$u.api.GetFetchMemberInviteInfo().then((res) => {
        this.info_data = res.data
      })
    },
    saveImg(e) {
      wx.showLoading({
        title: '保存中...',
      })
      wx.downloadFile({
        url: e,
        success: function (res) {
          // 图片保存到本地
          wx.saveImageToPhotosAlbum({
            filePath: res.tempFilePath,
            success: function (data) {
              wx.hideLoading()
              wx.showModal({
                title: '提示',
                content: '已存入手机相册',
                showCancel: false,
              })
            },
            fail: function (err) {
              if (
                err.errMsg === 'saveImageToPhotosAlbum:fail:auth denied' ||
                err.errMsg === 'saveImageToPhotosAlbum:fail auth deny'
              ) {
                // 这边微信做过调整，必须要在按钮中触发，因此需要在弹框回调中进行调用
                wx.showModal({
                  title: '提示',
                  content: '需要您授权保存相册',
                  showCancel: false,
                  success: (modalSuccess) => {
                    wx.openSetting({
                      success(settingdata) {
                        console.log('settingdata', settingdata)
                        if (settingdata.authSetting['scope.writePhotosAlbum']) {
                          wx.showModal({
                            title: '提示',
                            content: '获取权限成功,再次点击图片即可保存',
                            showCancel: false,
                          })
                        } else {
                          wx.showModal({
                            title: '提示',
                            content: '获取权限失败，将无法保存到相册哦~',
                            showCancel: false,
                          })
                        }
                      },
                      fail(failData) {
                        console.log('failData', failData)
                      },
                      complete(finishData) {
                        console.log('finishData', finishData)
                      },
                    })
                  },
                })
              }
            },
            complete(res) {
              wx.hideLoading()
            },
          })
        },
      })
    },
  }, // 挂载一些方法
  onLoad(options) {
    this.getSystemInfo()
    this.apiGetFetchMemberInviteInfo()
    console.log('onLoad', options, Date.now())
  }, // 生命周期回调—监听页面加载
  onShow() {}, // 生命周期回调—监听页面显示
  onReady() {}, // 生命周期回调—监听页面初次渲染完成
  onHide() {}, // 生命周期回调—监听页面隐藏
  onUnload() {}, // 生命周期回调—监听页面卸载
}
</script>

<style lang="scss" scoped>
.promotion {
  width: 100%;
  height: 1006rpx;
  background-image: url(../../static/images/invite_promotion_bg.png);
  background-size: cover;
  background-repeat: no-repeat;
  padding: 38rpx 95rpx 36rpx;
  font-size: 31rpx;
  font-family: Microsoft YaHei UI;
  font-weight: bold;
  color: #323232;
  .text {
    font-size: 25rpx;
    font-family: Microsoft YaHei UI;
    font-weight: bold;
    color: #323232;
  }
}
.invite_logo {
  width: 120rpx;
  height: 120rpx;
}
.promotion_code_box {
  width: 520rpx;
  height: 760rpx;
  background: #ffffff;
  border-radius: 25rpx;
  padding: 47rpx 80rpx 31rpx;
  text-align: center;
  .text {
    font-size: 31rpx;
    font-family: Microsoft YaHei UI;
    font-weight: bold;
    color: #d7443e;
  }
  .promotion_code {
    width: 360rpx;
    height: 360rpx;
  }
}
.copy {
  font-size: 31rpx;
  font-family: Microsoft YaHei UI;
  font-weight: 400;
  text-decoration: underline;
  color: #2faeff;
}
.save {
  width: 330rpx;
  height: 70rpx;
  background: #fcc307;
  border-radius: 35rpx;
  font-size: 33rpx;
  font-family: Microsoft YaHei UI;
  font-weight: 400;
  color: #ffffff;
}
</style>
